iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Modern Web

喪屍黑白切系列 第 29

Day 29 | 來組合個畫面吧 - Part 2

  • 分享至 

  • xImage
  •  

昨天稍微提了一些我切畫面時,
對 HTML 的規劃,
今天就來講 CSS 的部分啦!
(鐵人賽剩一天好興奮啊~終於可以休息一下了)

在 CSS 撰寫習慣上,
有人喜歡加上註解,
比較好知道這邊在設定哪個區塊
(當然這個前提是你沒有自由式的跳著下 CSS),
有協作需求的時候,可能其他人也比較不會一臉問號,
或是想拿磚頭砸你(或是埋了你),
有人卻覺得註解這種東西根本不需要存在,
只要你命名夠清楚,
有照著一些規範的撰寫習慣,
自然不需要註解這種東西。

我在寫的時候目前還是會習慣加上註解,
而且還是有一點長度的那種註解,
這樣找起來比較好找(我就懶),
大家共用的 CSS 設定我就會整理到最上面。

其實 CSS 的細節在前面的篇章裡面都有稍微講過了,
大概最大的差別就是,
我的 .item 外層我多包了一層 .item-group
好去控制這些 .item 項目,
以及我開頭 importGoogle Fonts 的字體,
還有 Font Awesome

這個版面的配色我是用 Color Hunt 找的,
我的這一篇 Day 05 | 給我點顏色瞧瞧 有提到其他的色彩網站,可以參考看看,

講了這麼多,
最後來提供我的 codepen

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天就是最後一天啦~就打個結語阿捏。


上一篇
Day 28 | 來組合個畫面吧 - Part 1
下一篇
Day 30 | 鐵人賽完賽,切版之路未完 - 結語
系列文
喪屍黑白切30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言